import React, { useState, useEffect } from 'react'
import './Login/home.css'
import { SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

export default function Home() {
  const navigate = useNavigate()
  const [Fei, setFei] = useState([])

  const getFei = async () => {
    const res = await axios.get('http://127.0.0.1:3000/getFei')
    setFei(res.data.fei)
  }

  useEffect(() => {
    getFei()
  }, [])
  return (
    <div style={{ background: '#f3f0e7', minHeight: '100vh', width: '100%', }}>
      {/* 标题部分 */}
      <div>
        <div style={{ marginLeft: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <p>中国</p>
            <p>非物质文化遗产</p>
          </div>
          {/*  style={{ marginLeft: '380px', marginTop: '-25px' }} */}
          <div><svg t="1739427286733" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283" width="30" height="30"><path d="M928 832H96c-17.6 0-32-14.4-32-32s14.4-32 32-32h832c17.6 0 32 14.4 32 32s-14.4 32-32 32z m-96 0H192c-17.6 0-32-14.4-32-32V480c0-193.6 158.4-352 352-352s352 158.4 352 352v320c0 17.6-14.4 32-32 32z m-608-64h576V480c0-158.4-129.6-288-288-288S224 321.6 224 480v288z m288 192c-88 0-160-72-160-160 0-17.6 14.4-32 32-32s32 14.4 32 32c0 52.8 43.2 96 96 96s96-43.2 96-96c0-17.6 14.4-32 32-32s32 14.4 32 32c0 88-72 160-160 160z m0-800c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32s32 14.4 32 32v64c0 17.6-14.4 32-32 32z" fill="#333333" p-id="4284"></path></svg></div>
        </div>

        <div>
          {/* 图片部分 */}
          <div style={{ margin: '10px 0', marginTop: '10px' }}>
            <img style={{ marginLift: '20px', borderRadius: '15px', width: '100%', height: 'auto' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u104.svg' alt='' ></img>
          </div>
        </div>
        {/* 导航图标部分 */}
        <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '10px', textAlign: 'center' }}>
          <div onClick={() => navigate('/events')}>
            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u121.svg' alt=''></img>
            <p>赴艺会</p>
          </div>
          <div onClick={() => navigate('/marketfair')}>
            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u122.svg' alt=''></img>
            <p>逛市集</p>
          </div>
          <div onClick={() => navigate('/youyuan_hui')}>
            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u123.svg' alt=''></img>
            <p>游园会</p>
          </div>
          <div>
            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u124.svg' alt=''></img>
            <p>匠心榜</p>
          </div>
        </div>
        {/* 今日非遗和非遗部分 */}
        <div style={{ marginTop: '25px', display: 'flex', marginLeft: '8px' }}>
          <div style={{ marginLeft: '15px', position: 'relative', wdith: '45%' }}><img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u107.svg' alt='' width='163px'  ></img>
            <div style={{ width: '30px', fontWeight: 'bold', background: '#fff', padding: '9px', borderRadius: '13px', position: 'absolute', top: '10px', left: '105px', opacity: '0.7' }}>今日非遗</div>
            <div style={{ position: 'absolute', top: "180px", left: '10px', color: '#fff', fontSize: '15px' }}>
              <p>京剧</p>
              <p>Beijing opera</p>
            </div>
          </div>
          <div style={{ marginLeft: '10px', position: 'relative', width: '45%' }} onClick={() => navigate('/feiyigongfanf')}><img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u140.svg' alt='' width='210px'></img>
            <div style={{ width: '30px', height: '30px', fontWeight: 'bold', background: '#fff', padding: '10px', borderRadius: '13px', position: 'absolute', top: '170px', left: '10px', opacity: '0.7' }}>非遗工坊</div>
          </div>
        </div>

        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', width: '400px', margin: '0 auto', marginTop: '25px', marginBottom: '10px', alignTems: 'center' }}>
            <div>非遗资讯</div>
            <div onClick={() => { navigate('/fei') }}>查看更多<svg t="1739521431005" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4180" width="12" height="12"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="4181"></path></svg></div>
          </div>
          {Fei.map(item => {
            return <div key={item._id} onClick={() => { navigate('/feixiang', { state: item }) }} style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', display: 'flex', width: '400px', margin: '0 auto', marginTop: '15px', marginBottom: '25px' }}>
              <div>
                <img src={item.img1} alt=''></img>
              </div>
              <div style={{ marginLeft: '10px', marginTop: '10px' }}>
                <p>{item.name}</p>
                <div style={{ width: '260px', display: 'flex', justifyContent: 'space-between', marginTop: '5px', color: 'gray' }}>
                  <div><p style={{ marginTop: '15px' }}>新华社</p></div>
                  <div><p style={{ marginTop: '17px' }}>{item.time}</p></div>
                </div>
              </div>
            </div>
          })}
        </div>
      </div>
    </div >
  )
}
